<template>
  <div >
    <van-tabbar v-model="active" class="active_tab">
    <van-tabbar-item
      v-for="(item,index) in tabbar"
      :key="index"
      @click="tab(index,item.name)"
    >
      <span :class="currIndex == index ? active:''">{{item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img v-if="item.name!=='shop'" :src="props.active ? item.active : item.normal">
        <!-- <a v-else href="https://shop520364543.taobao.com/?spm=a230r.7195193.1997079397.2.3c1464fdx3Aq5i"><img :src="props.active ? item.active : item.normal"></a> -->
      </template>
    </van-tabbar-item>
    <!-- 的撒降低啥等级 -->
  </van-tabbar>
    <div class="space"></div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar).use(TabbarItem);
  export default {
    data(){
      return {
        currIndex:0,
        active: 0,
        tabbar:[{
          name: "home",
          title: "首页",
          normal: require("../assets/tabbar/tab_1.png"),
          active: require("../assets/tabbar/tabb_1.png")
        },
        {
          name: "points",
          title: "点对点",
          normal: require("../assets/tabbar/tab_2.png"),
          active: require("../assets/tabbar/tabb_2.png")
        },
        {
          name: "capital",
          title: "资产",
          normal: require("../assets/tabbar/tab_3.png"),
          active: require("../assets/tabbar/tabb_3.png")
        },
        {
          name: "user",
          title: "我的",
          normal: require("../assets/tabbar/tab_4.png"),
          active: require("../assets/tabbar/tabb_4.png")
        }
      ]
      }
    },
    methods: {
      tab(index, val) {
        this.currIndex = index;
        if (val !== 'shop') {
          this.$router.push(val);
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  .nav{
    width: 100%;
    background-color: white;
    display: flex;
    align-items: flex-end;
    border-top: 1px solid #e1e1e1;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 66666;
    img{
      /*transform: scale(.5,.5);*/
    }
    a{
      font-weight: bold;
      text-decoration: none;
      padding: 5px 0;
      flex-grow: 1;
      color:#666;
      text-align: center;
      font-size: 12px;
      &.router-link-exact-active {
        background-color: transparent;
        color: #fed173;
      }
    }
    .space{
      height: 80px;
    }
    .icon{
      width: 30px;
      height: 30px;
      margin: auto;
      // background-image: url("./../assets/2.png");
      background-position: -30px -10px;
      i{
        font-size: 20px;
      }
    }
  }
  .van-tabbar-item--active{
    color: #ff6508;
  }
</style>
